<template>
  <form @submit="formSubmit">
    <div class='depotEnterDetail'>
      <scroll-view scroll-y>
        <detailList type='出库'></detailList>
        <div class="detailList">
          <div class="weui-cells__title header">确认信息</div>
          <div class="weui-cells weui-cells_after-title">

            <div class="weui-cell">
              <div class="weui-cell__bd">资方财务备注</div>
              <div class="weui-cell__ft">车架号明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字，文字说明文字说明文字说明文字说明文字说明文字说明文字说</div>
            </div>

            <div class="weui-cell">
              <div class="weui-cell__bd">平台确认备注</div>
              <div class="weui-cell__ft">车架号明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字，文字说明文字说明文字说明文字说明文字说明文字说明文字说</div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd">交车地点</div>
              <div class="weui-cell__ft">
                <input maxlength="50" name="didian" :disabled="editCode" :value="data.didian" placeholder="手动输入，最多输入50字" />
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd">备注</div>
              <div class="weui-cell__ft">
                <input maxlength="50" :disabled="editCode" name="beizhu" :value="data.beizhu" placeholder="手动输入，最多输入50字" />
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd">照片</div>
              <div class="weui-cell__ft">
                <Qinniu  :disabled="editCode" :data="imagesArray"></Qinniu>
              </div>
            </div>
          </div>
        </div>
        <view class="btn-area submit">
          <button formType="submit">提交</button>
        </view>
      </scroll-view>
    </div>
  </form>
</template>

<script>
  import detailList from '@/components/common/detailList'
  import Qinniu from '@/components/common/Qinniu'

  export default {
    data() {
      return {
        data: {
          didian: "", // 地点
          beizhu: "", //备注
        },
        imagesArray: [], //照片
        editCode: true, //编辑，还会查看，亦或者是添加
      }
    },
    methods: {
      formSubmit: function (e) {
        const params = e.mp.detail.value
        // 传入表单数据，调用验证方法
        if (!this.WxValidate.checkForm(params)) {
          const error = this.WxValidate.errorList[0]
          this.WxValidate.showModal(error)
          return false
        }

        // if(this.imagesArray.length==0){
        //     this.WxValidate.showModal({msg: '请上传车龄照片'})
        //     return false;
        // }


        this.$https.post("http://rap2api.taobao.org/app/mock/22254/lyl/xiaochegnxu/Warehousing_button_post", {
          params,
          img: this.imagesArray
        }).then(res => {
          this.WxValidate.showModal({
            msg: '提交成功',
          })
        })
      },
      // 判断disabled状态
      is_disabled() {
        let code = this.$mp.query.idCode
        switch (true) {
          case code == 1: //编辑
            this.editCode = false;
            break;
          case code == 2: //查看
            this.editCode = true;
            break;
          default:
            this.editCode = false;
            break; //添加
        }
      },
      initValidate() {
        // 验证字段的规则
        const rules = {
          didian: {
            required: true
          },

        }

        const message = {
          didian: {
            required: " 请填写交车地点"
          },
        }
        //创建实例对象
        this.WxValidate = new this.wxValidate(rules, message);
      },
    },
    mounted() {
      this.initValidate();
      this.is_disabled();
      this.$https.get("http://rap2api.taobao.org/app/mock/22254/lyl/xiaochengxu/WarehousingDetail", {
        id: this.$mp.query.id
      }).then(res => {
        this.imagesArray = res.data.data.imgLIst;
      })
    },
    components: {
      detailList,
      Qinniu
    }
  }
</script>


<style lang="scss" scoped>
  .depotEnterDetail {
    height: 100%;
    box-sizing: border-box;

    scroll-view {
      height: 100%;

    }

  }
</style>
